<template>
  <div>
    <base-layout>
      <template #searchPanel>
        <el-form :inline="true" :model="fromdata" label-width="110px">
          <el-row>
            <el-col :span="16">采购基础信息</el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item label="采购编号:">
                <div>{{ fromdata.purchaseCode }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购门店:">
                <div>{{ fromdata.purchaseStoreName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购供应商:">
                <div>{{ fromdata.purchaseSupplierName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购配件数量:">
                <div>{{ fromdata.partsNum }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="单据日期:">
                <div>{{ fromdata.purchaseReceiptsTime }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供应商联系人:">
                <div>{{ fromdata.purchaseSupplierUserName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供应商联系方式:">
                <div>{{ fromdata.purchaseSupplierPhone }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购总金额:">
                <div>{{ fromdata.amount }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="采购类型:">
                <div>{{ fromdata.purchaseType }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购备注:">
                <div>{{ fromdata.purchaseRemark }}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #contentPanel>
        <el-row class="">
          <el-col :span="22">采购配件列表</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <data-table
            :value="tableData"
            :total-count="totalCount"
            :table-column-attributes="tableColumnAttributes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :width="160"
          >
          </data-table>
        </el-row>
      </template>
    </base-layout>
  </div>
</template>
<script>
import baseMixin from '@/mixins/base'
import { partsPage } from '@/api/after-sale/purchaseManage/purchaseRecords'

export default {
  name: 'carInfo',
  components: {},
  props: {
    id: Number,
    fromdata: {
      type: Object,
      default: () => ({}),
    },
  },
  mixins: [
    baseMixin({
      idName: 'id',
      findData: partsPage,
      dataName: ['content', 'totalRecords'],
      format(res) {
        return res.map((data) => {
          data.all = data.alreadyNum + data.num
          return data
        })
      },
    }),
  ],
  data() {
    return {
      tableColumnAttributes: [
        { name: '配件编号', value: 'partsCode', type: 'text' },
        { name: '配件名称', value: 'partsName', type: 'text' },
        { name: '配件类别', value: 'partsType', type: 'text' },
        { name: '配件单位', value: 'partsUnit', type: 'text' },
        { name: '采购数量', value: 'purchaseNum', type: 'text' },
        { name: '采购成本', value: 'purchasePrice', type: 'text' },
        // { name: "销售价", value: "storagePrice", type: "text" },
        { name: '总金额', value: 'amount', type: 'text' },
      ],
    }
  },
  methods: {},
  created() {
    this.searchOptions.purchaseRecordId = this.id
  },
}
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
